<template>
    <div class="ele-body">

        <el-card shadow="never" body-style="padding-bottom:0;">
            <el-row :gutter="10">
                <el-col :md="6" style="margin-bottom:15px;">

                    <div class="ele-table-tool ele-table-tool-default">
                        <el-button @click="showEdit=true" 
                            type="primary" 
                            icon="el-icon-plus" 
                            class="ele-btn-icon" 
                            size="mini">添加设备组
                        </el-button>

                        <el-button @click="edit" type="warning" icon="el-icon-edit" class="ele-btn-icon"
                                :disabled="!current" size="mini">修改设备组
                        </el-button>

                        <el-button @click="remove" type="danger" icon="el-icon-delete" class="ele-btn-icon"
                                :disabled="!current" size="mini">删除设备组
                        </el-button>
                    </div>

                    <ele-data-table ref="table"
                        :config="table" :current.sync="current" :choose="[]" 
                        @done="done" highlight-current-row :height="tbHeight" class="dict-table">

                        <el-table-column type="index" label="编号" width="60" align="center"/>

                        <el-table-column prop="name" label="设备组名称" show-overflow-tooltip>
                            <template slot-scope="{row}">{{ row.name }}</template>
                        </el-table-column>
                    </ele-data-table>

                </el-col>

                <el-col :md="18" style="margin-bottom:15px;">
                    <device-data v-if="current" :group-id="current.id" :tb-height="tbHeight"/>
                </el-col>

            </el-row>
        </el-card>

        <el-dialog :title="editForm.id ? '修改设备组' : '添加设备组'" 
                :visible.sync="showEdit" 
                width="600px"
                @closed="editForm={}" 
                :destroy-on-close="true" 
                :lock-scroll="false">

            <el-form :model="editForm" ref="editForm" :rules="editRules" label-width="82px">
                <el-form-item label="分组名称:" prop="name">
                    <el-input v-model="editForm.name" placeholder="请输入分组名称" clearable/>
                </el-form-item>
                <el-form-item label="排序号:" prop="sort">
                    <el-input-number v-model="editForm.sort" controls-position="right" :min="0" placeholder="请输入排序号" class="ele-fluid ele-text-left"/>
                </el-form-item>
                <el-form-item label="备注:">
                    <el-input v-model="editForm.note" placeholder="请输入备注" :rows="4" type="textarea"/>
                </el-form-item>
            </el-form>

            <div slot="footer">
                <el-button @click="showEdit=false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>

        </el-dialog>

    </div>
</template>

<script>
import DeviceData from './device-data'

export default {
    name: "DeviceIndex",
    components: {DeviceData},
    data() {
        return {
            table: {url: '/api/admin/device/device/group', page: false, where: {}},  // 表格配置
            current: null,  // 表格选中数据
            showEdit: false,  // 是否显示表单弹窗
            editForm: {},  // 表单数据
            editRules: {  // 表单验证规则
                name: [
                    {required: true, message: '请输入分组名称', trigger: 'blur'}
                ],
                sort: [
                    {required: true, message: '请输入排序号', trigger: 'blur'}
                ]
            }
        }
    },

    computed: {
        /* 表格固定高度 */
        tbHeight() {
            return this.$store.state.theme.screenWidth < 992 ? undefined : 'calc(100vh - 265px)';
        }
    },

    methods: {

    /* 表格渲染完成回调 */
    done(res) {
       if (res.data.length > 0) this.$refs.table.setCurrentRow(res.data[0]);
    },

    edit() {
        this.editForm = Object.assign({}, this.current);
        this.showEdit = true;
    },

    save() {
        this.$refs['editForm'].validate((valid) => {
            if (valid) {
                const loading = this.$loading({lock: true});

                console.log(this.editForm);
                this.$http.post('/api/admin/device/device/editGroup', this.editForm).then(res => {
                    loading.close();
                    if (res.data.code === 0) {
                        this.showEdit = false;
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            } else {
                return false;
            }
        });
    },

    remove() {
        this.$confirm('确定要删除选中的设备组吗?', '提示', {type: 'warning'}).then(() => {
            const loading = this.$loading({lock: true});
            this.$http.post('/api/admin/device/device/delGroup?id=' + this.current.id).then(res => {
                loading.close();
                if (res.data.code === 0) {
                    this.$message({type: 'success', message: res.data.msg});
                    this.$refs.table.reload();
                } else {
                    this.$message.error(res.data.msg);
                }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            }).catch(() => 0);
        }
    }
}
</script>

<style scoped>

</style>